<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .text {
            font-size: 30px;
            text-align: center;
        }

        body {
            background-image: url(images/bg.jpg);
        }

        .form {
            width: 550px;
            height: 400px;
            border: 1px solid rgb(236, 167, 19);
            background-color: rgba(15, 238, 64, 0.808);
            margin: 120px auto;

        }

        .center_btn {
            text-align: center;
        }
    </style>
    <script>
        const request = new XMLHttpRequest();
        /* 
            需求1：判断两次输入的密码是否相同
            需求2：判断邮箱的格式是否满足规范
            需求3：判断用户输入的手机号是否是未注册的?
                通过Ajax请求将手机号发送到服务端进行验证
         */
        function checkForm() {
            //判断需求1和需求2都满足条件的时候才提交
            return checkPassword() && checkEmail();
        };

        /* 
            判断两次输入的密码是否相同
         */
        function checkPassword() {
            const pwdObj1 = document.querySelector("#password");
            const pwdObj2 = document.querySelector("#rePassword");

            console.log(pwdObj1.value);
            console.log(pwdObj2.value);
            //两次输入的密码是一样的
            if (pwdObj1.value == pwdObj2.value) {
                return true;
            } else {
                // 两次输入密码不一致的时候，加入提示
                pwdObj2.setAttribute("class", "form-control is-invalid");
                return false;
            }
        };

        function checkEmail() {
            const emailObj1 = document.querySelector("#emailText");
            /* 
                如何判断邮件地址是否满足条件呢？
                    432@qq.com
                    具体要求：
                        数字和字母开始 + @ + 字母 + . + .com结尾。
                    这个需要判断的字符串是变化的，不是固定的，怎么判断呢？
                    需要使用正则表达式。
             */
            return false;
        }

        /* 
            需求3：判断用户输入的手机号是否是未注册的?
            给文本框绑定一个blur事件。
         */
        window.addEventListener("load", function () {
            const phonenumberObj = document.querySelector("#phonenumber1");

            phonenumberObj.addEventListener("blur", function () {
                /* 
                    判断1：手机号的长度是否是11位
                 */
                if (phonenumberObj.value.length != 11) {
                    // console.log("手机号不满足要求")
                    return false;
                };

                /* 
                    判断2：手机号是否满足规范要求
                        2.1 是否都是整数：可以遍历个字符串，判断每一个整数是否是0-9这个区间的。并且第一位数不是0，是1
                 */

                /* 
                    判断3：需要请求后端服务器，判断这个手机号在后台的数据中是否存在。然后服务端再把结果发送回来
                */
                request.open("GET", "http://120.78.190.136:8080/spboot/checkPhoneNumberExists?phonenumber=" + phonenumberObj.value);
                request.send();
                request.onreadystatechange = function () {
                    if (request.readyState == 4 && request.status == 200) {

                    }
                }
            });
        });

    </script>
</head>

<body>
    <!-- 
        onsubmit：提交form表单，如果onsubmit指定的函数返回true就会正常提交，如果返回false就不提交
     -->
    <form class="form" onsubmit="return checkForm();">
        <div class="alert alert-primary text">新用户注册</div>
        <div class="form-group row">
            <label for="username" class="col-sm-2 offset-sm-2 col-form-label">手机号码</label>
            <div class="col-sm-6">
                <input name="phonenumber" type="text" class="form-control" id="phonenumber1" placeholder="请输入手机号"
                    required>
                <div class="valid-feedback">
                    满足要求
                </div>
                <div class="invalid-feedback">
                    不满足要求
                </div>
                <small id="passwordHelpInline" class="form-text text-muted">
                    手机号必须是未注册过的.
                </small>
            </div>
        </div>

        <div class="form-group row">
            <label for="password" class="col-sm-2 offset-sm-2 col-form-label">密码</label>
            <div class="col-sm-6">
                <input name="pwd" type="password" class="form-control" id="password" placeholder="请输入密码" required>
                <small id="passwordHelpInline" class="form-text text-muted">
                    密码必须是6-16位
                </small>
            </div>
        </div>
        <div class="form-group row">
            <label for="rePassword" class="col-sm-2 offset-sm-2 col-form-label">确认密码</label>
            <div class="col-sm-6">
                <input name="rePwd" type="password" class="form-control" id="rePassword" placeholder="请输入重复密码" required>
                <div class="invalid-feedback">
                    两次密码不一致
                </div>
            </div>
        </div>

        <div class="form-group row">
            <label for="emailText" class="col-sm-2 offset-sm-2 col-form-label">邮箱</label>
            <div class="col-sm-6">
                <input name="text" type="email" class="form-control" id="emailText" placeholder="请输入邮箱" required>
                <div class="invalid-feedback">
                    邮箱不符合格式
                </div>
            </div>
        </div>
        <div class="form-group row">
            <!--  -->
            <div class="col-sm-4 offset-sm-4 center_btn">
                <button type="submit" class="btn btn-primary">确定</button>
            </div>
        </div>
    </form>
</body>

</html>